<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<% 
	String context = request.getContextPath(); 
	String basePath = request.getServerName() + ":" + request.getServerPort() + context + "/";
%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>数据验证</title>
		<link rel="stylesheet" href="<%=context%>/microcore/commoncss/basics.css" />
		<style type="text/css">
			body{background:#BCD68D;line-height:25px;padding:0 30px}
		</style>
	</head>
	<body>
		<h2>依赖文件：</h2>
		1、microcore/commoncss/basics.css<br />
		2、microcore/jquery-2.1.0.min.js<br />
		3、microcore/form/validation.js<br />
		<div style="background: #fff;border-radius:5px;padding:10px;">
			<form id="form">
				<h3>个人信息修改(以气泡的形式显示)</h3>
				用户名：<input name="userName" type="text" /><br /><br />
				密码：<input name="password" type="password" /><br /><br />
				邮箱：<input name="email" type="text" /><br /><br />
				籍贯：
				<select name="origin">
					<option value="">---选择---</option>
					<option value="sichuan">四川</option>
					<option value="guangdong">广东</option>
					<option value="henan">河南</option>
					<option value="beijing">北京</option>
				</select><br /><br />
				个性描述：<textarea name="describe"></textarea><br /><br />
				<input id="submit" type="button" class="btn btn-default" value="修改" />
			</form><br />
			<form id="form2">
				<h3>个人信息修改(以图标的形式显示)</h3>
				用户名：<input name="userName" type="text" /><br /><br />
				密码：<input name="password" type="password" /><br /><br />
				邮箱：<input name="email" type="text" /><br /><br />
				籍贯：
				<select name="origin">
					<option value="">---选择---</option>
					<option value="sichuan">四川</option>
					<option value="guangdong">广东</option>
					<option value="henan">河南</option>
					<option value="beijing">北京</option>
				</select><br /><br />
				个性描述：<textarea name="describe"></textarea><br /><br />
				<input id="submit2" type="button" class="btn btn-default" value="修改" />
			</form>
		</div>
		<h3>HTML代码：</h3>
		<div style="background: #fff;border-radius:5px;padding:10px;">
			&lt;form id="form"><br />
				&nbsp;&nbsp;&lt;h3>个人信息修改&lt;/h3><br />
				&nbsp;&nbsp;用户名：&lt;input name="userName" type="text" /><br />
				&nbsp;&nbsp;密码：&lt;input name="password" type="password" /><br />
				&nbsp;&nbsp;邮箱：&lt;input name="email" type="text" /><br />
				&nbsp;&nbsp;籍贯：
				&lt;select name="origin"><br />
					&nbsp;&nbsp;&nbsp;&nbsp;&lt;option value="">---选择---&lt;/option><br />
					&nbsp;&nbsp;&nbsp;&nbsp;&lt;option value="sichuan">四川&lt;/option><br />
					&nbsp;&nbsp;&nbsp;&nbsp;&lt;option value="guangdong">广东&lt;/option><br />
					&nbsp;&nbsp;&nbsp;&nbsp;&lt;option value="henan">河南&lt;/option><br />
					&nbsp;&nbsp;&nbsp;&nbsp;&lt;option value="beijing">北京&lt;/option><br />
				&nbsp;&nbsp;&lt;/select><br />
				&nbsp;&nbsp;个性描述：&lt;textarea name="describe">&lt;/textarea><br />
				&nbsp;&nbsp;&lt;input id="submit" type="button" class="btn btn-default" value="修改" />
			</form>
		</div>
		<h3>JS代码：</h3>
		<div style="background: #fff;border-radius:5px;padding:10px;">
			&nbsp;&nbsp;$("#submit").click(function(){<br />
				&nbsp;&nbsp;&nbsp;&nbsp;var type = "bubble"或"ico";<br />
				&nbsp;&nbsp;&nbsp;&nbsp;var options = {<br />
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;password:{isempty:false,regexp:"^[0-9a-zA-z_]{6,}$",text:"密码长度必须大于等于六位"},<br />
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;email:{isempty:false,regexp:"^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$",text:"邮箱格式不正确"},<br />
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;origin:{isempty:false}<br />
				&nbsp;&nbsp;&nbsp;&nbsp;}<br />
				&nbsp;&nbsp;&nbsp;&nbsp;$("#form").validation(type,options);<br />
			&nbsp;&nbsp;});
			<h4>参数说明：</h4>
			isempty：是否允许为空，true/false。必填<br />
			regexp：正则表达式，不需要前后的斜杠/，^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$。选填<br />
			text：不满足条件时的提示文字。如果isempty为true时，此字段可以省略。<br />
			type：提示显示的效果，bubble表示以气泡的形式显示，ico表示以图标的形式显示。
		</div>
	</body>
	<script src="<%=context%>/microcore/jquery-2.1.0.min.js"></script>
	<script src="<%=context%>/microcore/form/validation.js"></script>
	<script>
		$(function(){
			$("#submit").click(function(){
				var options = {
					password:{isempty:false,regexp:"^[0-9a-zA-z_]{6,}$",text:"密码长度必须大于等于六位"},
					email:{isempty:false,regexp:"^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$",text:"邮箱格式不正确"},
					origin:{isempty:false}
				}
				$("#form").validation("bubble",options);
			});
			$("#submit2").click(function(){
				var options = {
					password:{isempty:false,regexp:"^[0-9a-zA-z_]{6,}$",text:"密码长度必须大于等于六位"},
					email:{isempty:false,regexp:"^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$",text:"邮箱格式不正确"},
					origin:{isempty:false}
				}
				$("#form2").validation("ico",options);
			});
		});
	</script>
</html>
